<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="70%"
      draggable
      destroy-on-close
    >
      <el-card style="height: 500px; overflow: auto">
        <Search @search="getData" @reset="resetSearchForm" style="width: 100%">
          <SearchItem title="关键词">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入商品名"
              @keyup.enter="getData"
            ></el-input>
          </SearchItem>
          <template v-slot:show>
            <SearchItem title="分类">
              <el-select
                v-model="searchForm.category_id"
                clearable
                placeholder="请选择分类"
              >
                <el-option
                  v-for="item in catesList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </SearchItem>
          </template>
        </Search>

        <el-table :data="tableList" @selection-change="handleDeleteAll">
          <el-table-column type="selection" width="55" />
          <el-table-column label="商品" prop="">
            <template #default="{ row }">
              <div class="flex">
                <el-image
                  class="mr-3 rounded"
                  :src="row.cover"
                  fit="cover"
                  :lazy="true"
                  style="width: 50px; height: 50px"
                />
                <div class="ml-5">
                  <h6>{{ row.title }}</h6>
                  <p>￥{{ row.min_price }} | ￥{{ row.min_oprice }}</p>
                  <p class="text-gray-400">
                    分类：{{ row.category?.name || "" }}
                  </p>
                  <p class="text-gray-400">创建时间：{{ row.update_time }}</p>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="总库存"
            prop="stock"
            width="150"
          ></el-table-column>
          <el-table-column label="价格（元）" width="150" align="center">
            <template #default="{ row }">
              <span class="text-rose-500">￥{{ row.min_price }}</span>
              <el-divider direction="vertical"></el-divider>
              <span class="text-gray-500 text-xs">￥{{ row.min_oprice }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex items-center justify-center mt-3">
          <el-pagination
            background
            layout="prev, pager,next"
            :total="total"
            :current-page="page"
            :page-size="limit"
            @current-change="changePage"
          />
        </div>
      </el-card>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="chooseGoods"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Search from "@/components/Search/Search.vue";
import SearchItem from "@/components/Search/SearchItem.vue";
import { getGoodsList } from "@/api/goods";
import { ref } from "vue";
import { useInitTable } from "@/composables/useCommon.js";

let catesList = ref([]); // 分类列表
const dialogVisible = ref(false);
const {
  tableList,
  page,
  total,
  limit,
  searchForm,
  getData,
  resetSearchForm,
  changePage,
  handleDeleteAll,
  ids,
} = useInitTable({
  searchForm: {
    title: "",
    tab: "all",
    category_id: "",
  },
  getList: getGoodsList,
  onGetListSuccess: (res) => {
    total.value = res.data.totalCount;
    catesList.value = res.data.cates;
    tableList.value = res.data.list;
  },
});
let callbackFun = ref(null);
const open = (callback) => {
  callbackFun.value = callback;
  dialogVisible.value = true;
};
const chooseGoods = () => {
  if (typeof callbackFun.value === "function") {
    callbackFun.value(ids.value);
    dialogVisible.value = false;
  }
};
defineExpose({
  open,
});
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
